<template>
  <div class="reservation">
    <header>
      <h3>{{ hospitalStore.hospitalInfo.hospital?.hosname }}</h3>
      <svg t="1690959461353" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="2315" width="16" height="16">
        <path
            d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
            p-id="2316"></path>
      </svg>
      <span>{{ hospitalStore.hospitalInfo.hospital?.param.hostypeString }}</span>
    </header>
    <section>
      <div class="left">
        <img :src="`data:image/jpeg;base64,${hospitalStore.hospitalInfo.hospital?.logoData}`" alt="">
      </div>
      <div class="right">
        <p class="rule1">挂号规则</p>
        <p class="time">预约周期:10天 放号时间:{{
            hospitalStore.hospitalInfo.bookingRule?.releaseTime
          }}
          停挂时间:{{ hospitalStore.hospitalInfo.bookingRule?.stopTime }}</p>
        <p class="address">具体位置:{{ hospitalStore.hospitalInfo.hospital?.param.fullAddress }}</p>
        <p class="route">具体路线:{{ hospitalStore.hospitalInfo.hospital?.route }}</p>
        <p class="release-time">退号时间:就诊前一工作日{{
            hospitalStore.hospitalInfo.bookingRule?.quitTime
          }}前取消</p>
        <p class="rule2">预约挂号规则</p>
        <p class="ruleInfo" v-for="(item,index) in hospitalStore.hospitalInfo.bookingRule?.rule">{{ item }}</p>
      </div>
    </section>
    <div class="deparment">
      <nav class="left">
        <ul>
          <li v-for="(deparment,index) in hospitalStore.hospitalDepartment" :key="deparment.depcode"
              :class="{active:deparmentFlog === index}" @click="handlerClick(index)"
          >{{ deparment.depname }}
          </li>
        </ul>
      </nav>
      <div class="right">
        <div class="showDeparment" v-for="(deparment,index) in hospitalStore.hospitalDepartment"
             :key="deparment.depcode">
          <h1 class="title">{{ deparment.depname }}</h1>
          <ul>
            <li v-for="(item,index) in deparment.children" @click="showLogin(item.depcode)">{{ item.depname }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import Header from "@/components/Header.vue";
import useHospitalDetailStore from "@/store/modules/hospitalDetail";

import useUserStore from "@/store/modules/user";
import {ElMessage} from "element-plus";

let userStore = useUserStore();
// 引入路由对象
let $router = useRouter();
let hospitalStore = useHospitalDetailStore();
let hoscode = ref<string>('');
let deparmentFlog = ref<number>(0)


// 处理点击时激活背景
let handlerClick = (index: number) => {
  deparmentFlog.value = index;
  let allH1 = document.querySelectorAll('.title'); //获取所有h1
  allH1[deparmentFlog.value].scrollIntoView({behavior :"smooth"}) //点击时跳转到相应科室位置
}

// 点击预约科室时判断是否已经登录
let showLogin = (depcode:string) => {
  if (localStorage.getItem('USERINFO')) {
    $router.push({path:'/hospital/reservation_setup1',query:{hoscode:hoscode.value,depcode}})
  }else {
    ElMessage({message:'请先登录账户',type:"warning"});
    userStore.showLogin = true;
  }
}



onMounted(() => {
  hoscode.value = $router.currentRoute.value.query.hoscode; //存储query传递过来的hoscode
  hospitalStore.getHospitalDepartment(hoscode.value) // 请求医院预约挂号数据
})

</script>

<style scoped lang="less">
header {
  display: flex;
  align-items: center;

  h3 {
    margin-right: 10px;
    font-size: 30px;
    font-weight: bold;
  }

  span {
    margin-left: 5px;
  }
}

section {
  display: flex;

  .left {
    flex: 1;

    img {
      width: 80px;
      height: 80px;
      border-radius: 50%
    }
  }

  .right {
    flex: 9;

    p:nth-child(n+2) {
      margin-top: 10px;
      color: #7f7f7f;
    }

    p.rule2 {
      color: black;
    }

  }

}

.deparment {
  display: flex;
  margin-top: 20px;
  width: 100%;
  height: 500px;

  .left {
    flex: 1;
    margin-right: 20px;

    ul {
      display: flex;
      flex-direction: column;
      width: 80px;
      height: 100%;
      background: rgb(248, 248, 248);
      color: #7f7f7f;

      li {
        flex: 1;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }

      .active {
        border-left: 1px solid red;
        color: red;
        background: white;
      }
    }
  }

  .right {
    flex: 9;
    overflow: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    .showDeparment {
      h1 {
        color: #7f7f7f;
        background-color: rgb(248, 248, 248);
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 33%;
          color: #7f7f7f;
          line-height: 30px;
          cursor: pointer;

        }
      }
    }
  }
}
</style>